import React, { Component } from 'react';
import { Form, Input, Button, Icon, message } from 'antd';
import './index.less';
import axios from 'axios';

const FormItem = Form.Item;

class ModifyPwd extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmDirty: false,
      autoCompleteResult: [],
    };
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const Token = sessionStorage.getItem('token');
        const _this = this;
        axios({
          method: 'post',
          url: '/api/admin/user/resetPass',
          headers: {
            Authorization: Token
          },
          data: values
        })
          .then(function(response) {
            if (response.data.code == 200) {
              if (response.data.rel) {
                message.success(response.data.data);
              } else {
                message.error(response.data.data);
              }
            }
            _this.props.form.resetFields();

          })
          .catch(function(error) {
            console.log(error);
            message.error('服务器开小差啦，请重试！');
          });
      }
    });
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('您输入的两个密码不一致！');
    } else {
      callback();
    }
  }
  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;
    return (
      <Form className="registerForm" onSubmit={this.handleSubmit}>
        <h3 className="pwdTitle">密码修改</h3>
        <FormItem
          label="原密码："
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
        >
          {getFieldDecorator('attr1', {
            rules: [{ required: true, message: '请输入原密码!', }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入原密码" />
          )}
        </FormItem>
        <FormItem
          label="输入新密码："
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
        >
          {getFieldDecorator('password', {
            rules: [{
              required: true, message: '请输入新密码！',
            }, {
              validator: this.validateToNextPassword,
            }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入密码" />
          )}
        </FormItem>
        <FormItem
          label="确认新密码："
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
        >
          {getFieldDecorator('attr2', {
            rules: [{
              required: true, message: '请确认新密码！',
            }, {
              validator: this.compareToFirstPassword,
            }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请再次输入密码" />
          )}
        </FormItem>
        <div className="modifyBtns">
          <Button type="primary" htmlType="submit">确认修改</Button>
        </div>
      </Form>
    );
  }
}

const ModifyPassWord = Form.create()(ModifyPwd);
export default ModifyPassWord;
